<template>
  <div class="user-wrapper">
      <div class="user-title"><van-button
        class="btn-back"
        icon="arrow-left"
        :to="{ name: 'user' }" />
        {{$t('User.account')}}
      </div>

      <van-cell-group class="margin-t30">
        <van-cell
          is-link
          :title="$t('User.avatar')"
          @click="showAvatarPopUp=true">
          <template>
            <div v-if="avatarImg" class="avatar">
              <img :src="avatarImg" class="avatar-img" alt="">
            </div>
            <div v-else>{{ $t('User.avatar_popup_title')}}</div>
          </template>
        </van-cell>
        <van-cell
          is-link
          :title="$t('User.nickname')"
          @click="showNicknamePopUp=true">
          {{ username }}
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell
          is-link
          :title="$t('User.mobile_binding')"
          :to="{ name: 'bind-phone' }">
          {{ phoneNumber || $t('User.mobile_binding_text') }}
        </van-cell>
        <van-cell
          is-link
          :title="$t('User.wechat_binding')"
          @click="bindWx">
          {{ $t('User.wechat_binding_text') }}
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell
          is-link
          :title="$t('User.change_pw')"
          :to="{ name: 'change-password' }"></van-cell>
      </van-cell-group>

      <!-- 修改头像 -->
      <van-popup
        v-model="showAvatarPopUp"
        position="bottom"
        round>
        <van-button
          class="shot-action"
          @click="shot"
          block>{{ $t('User.camera') }}</van-button>
        <van-button
          class="shot-action"
          @click="album"
          block>{{ $t('User.use_photo') }}</van-button>
        <van-button
          class="cancel-action"
          @click="showAvatarPopUp=false"
          block>{{ $t('User.cancel') }}</van-button>
      </van-popup>

      <!-- 修改昵称 -->
      <van-dialog
        v-model="showNicknamePopUp"
        :title="$t('User.account_popup_title')"
        :cancelButtonText="$t('User.cancel')"
        :beforeClose="modNickname"
        class="modify-nickname"
        show-cancel-button>
        <van-field
          v-model="nickname"
          :placeholder="$t('User.accountMaxLength')"
          clearable />
      </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatarImg: '',
      showAvatarPopUp: false,
      showNicknamePopUp: false,
      username: '',
      nickname: '',
      nicknameError: '',
      phoneNumber: '',
      showWxPopUp: false,
      wxState: true,
    };
  },
  created() {

  },
  methods: {
    // 拍照
    shot() {
      this.$jsBridge.JsGetPhoto();
    },
    // 打开相册
    album() {

    },

    // 修改昵称
    modNickname(action, done) {
      if (action === 'confirm' && this.nickname === '') {
        this.nicknameError = this.$t('User.enter_nickname');
      } else {
        done();
      }
    },

    // 绑定/解绑微信
    bindWx() {
      this.$jsBridge.JsGoBindWeChat({}, res => {
        if (res.code === 0) {
          //
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .margin-t30{margin-top:30px;}
  .van-cell-group{
    margin-bottom: 20px;
    background: none;
  }
  .van-cell{
    padding:0 40px;
    font-size:@font-size-md;
    color:#333;
    height: 88px;
    line-height:88px;
    align-items: center;
  }
  .van-cell__title{
    font-family: 'PingFang-SC-Regular';
    font-weight: normal;
  }
  .van-cell__value{
    font-weight: bold;
    color: #333;
  }
  .avatar{
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    margin-left: auto;
  }
  .avatar-img{
    max-width: 100%;
    max-height: 100%;
  }
  .van-popup--bottom{
    bottom: 40px;
    left: 40px;
    right: 40px;
    width: auto;
    border-radius:20px;
  }
  .shot-action{
    height:130px;
    line-height:130px;
    border-bottom:1px solid #EFEFEF;
    font-weight:bold;
    color: #333;
  }
  .cancel-action{
    height:130px;
    line-height:130px;
    color: #999;
  }
  .modify-nickname{
    .van-field{
      margin:50px 40px;
      background: #f6f6f6;
      border-radius:20px;
      width: auto;
    }
  }
</style>
